<template>
  <div>
    <el-container>
      <el-header
          style="background-color: royalblue ; display: flex ; justify-content: space-between ; align-items: center">
        <div>***人力资源管理系统</div>
        <div style="display: flex ; align-items: center">
          <el-dropdown @command="menuCommand">
            <span class="el-dropdown-link">
              {{ currentHr.name }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="usercenter">个人中心</el-dropdown-item>
              <el-dropdown-item command="setting">设置</el-dropdown-item>
              <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu @select="menuSelect" class="el-menu-vertical-demo">
            <!--            //找所有路由的选项-->
            <el-submenu :index="indexi+''" v-for="(menu , indexi) in this.menus" v-if="!menu.hidden">
              <template slot="title">
                <i :class="menu.iconCls"></i>
                <span>{{ menu.name }}</span>
              </template>
              <!--              //再上面遍历出来的每一个路由中的子路由,再边路子路由的路由信息-->
              <el-menu-item :index="child.path" v-for="(child , indexj) in menu.children">{{
                  child.name
                }}
              </el-menu-item>

            </el-submenu>
            <!--            <el-submenu index="2">-->
            <!--              <template slot="title">-->
            <!--                <i class="el-icon-location"></i>-->
            <!--                <span>系统管理</span>-->
            <!--              </template>-->
            <!--              <el-menu-item index="/sysbak">系统备份</el-menu-item>-->
            <!--              <el-menu-item index="/syslog">系统日志</el-menu-item>-->
            <!--            </el-submenu>-->

          </el-menu>
        </el-aside>

        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path != '/home'">
            <!--            //"**** != ***" 整个为true,就显示-->
            <!--            //this.$router.currentRoute当前路由的信息.-->
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div v-if="this.$router.currentRoute.path=='/home'">
            欢迎光临
          </div>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import {getRequest} from "@/util/api";

import {initMenu} from "@/util/menu";

export default {
  name: "home",
  data() {
    return {
      //将存在sessionStorage中的字符串数据拿出来,然后转成json对象,才能够在ui中根据json节点拿出数据.
      currentHr: JSON.parse(window.sessionStorage.getItem("currentHr")),
      // menus: [],

    }
  },
  computed: {
    //里面定义的是方法
    menus(){
      return this.$store.state.menus;

    }

  },
  mounted() {
    // this.initMenu();
  },
  methods: {
    menuCommand(cmd) {
      if (cmd == 'logout') {
        this.$confirm('此操作将注销, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //每个页面手动导入,getRequest前面不用加this,如果做成插件,就要加this
          this.getRequest('/logout');
          //删除用户信息
          window.sessionStorage.removeItem("currentHr");
          this.$store.commit("INIT_MENUS", [])
          //跳转到登录页
          this.$router.replace("/")
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    menuSelect(index, indexpath) {
      this.$router.push(index)
    },
    //   initMenu() {
    //     if (this.menus.length <= 0) {
    //       this.getRequest("/menu").then((respone) => {
    //
    //         this.menus = respone;//只要到这一句,其实菜单已经加载好,但点击菜单不能正确加载对应的组件.所以将json中的component值字符串转换为对象引用插入router中
    //         let fmtRoutes = this.fmtRoutesFun(respone);
    //         this.$router.addRoutes(fmtRoutes);
    //       })
    //     }
    //   },
    //   fmtRoutesFun(routes) {
    //     let fmtRoutes = [];
    //
    //     routes.forEach(route => {
    //       let {
    //         path,
    //         name,
    //         component,
    //         children,
    //         iconCls
    //       } = route;
    //       if (children && children instanceof Array) {
    //         children = this.fmtRoutesFun(children);
    //       }
    //       let fmtRoute = {
    //         path: path,
    //         name: name,
    //         children: children,
    //         iconCls: iconCls,
    //         component(resolve) {
    //           //动态加载组件 固定写法 可以理解为拼接了之后在解析成对象.resolve有解析的意思
    //           if (component.startsWith("Home")) {
    //             require(['./' + component + '.vue'], resolve); //这个component是上面批量定义赋值了的那个.
    //           } else if (component.startsWith("Emp")) {
    //             require(['./emp/' + component + '.vue'], resolve);
    //           } else if (component.startsWith("Per")) {
    //             require(['./per/' + component + '.vue'], resolve);
    //           } else if (component.startsWith("Sal")) {
    //             require(['./sal/' + component + '.vue'], resolve);
    //           } else if (component.startsWith("Sta")) {
    //             require(['./sta/' + component + '.vue'], resolve);
    //           } else if (component.startsWith("Sys")) {
    //             require(['./sys/' + component + '.vue'], resolve);
    //           }
    //         }
    //       }
    //       fmtRoutes.push(fmtRoute);
    //     })
    //     return fmtRoutes;
    //   }
  }

}
</script>

<style scoped>

</style>